<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <input type="button" value="btn" id="btn1"> -->
    <input type="button" value="btn" id="btn2">
    <input type="button" value="btn" id="btn3">
    <input type="button" value="btn" id="btn4">
    <input type="button" value="btn" id="btn5">
    <input type="button" value="btn" id="btn6">
    <input type="button" value="btn" id="btn7">
    <input type="button" value="btn" id="btn8">

    <!-- 克隆对象 -->
    <p id="old1" style="font-size: 16px;color: aquamarine;">old</p>

    <script>
        function getBtn(){
            let oBen1 = document.getElementById('btn1')
            let oBen3 = document.getElementById('btn3')
            let oBen5 = document.getElementById('btn5')
            let oBen7 = document.getElementById('btn7')
        }
        function getBtn2(){
            let obj = document
            let oBen1 = obj.getElementById('btn1')
            let oBen3 = obj.getElementById('btn3')
            let oBen5 = obj.getElementById('btn5')
            let oBen7 = obj.getElementById('btn7')
        }
        function bar(){
            let oBen1 = document.getElementById('btn1')
            console.log(oBen1)
        }
        bar()

        // 新增节点优化【性能测试上两者相差不大，但是在大量的节点配置上，第二种文档碎片会更优】
        for(var i=0;i<10;i++){
            const op = document.createElement('p')
            op.innerHTML = i
            document.body.appendChild(op)
        }
        const fragEl = document.createDocumentFragment()
        for(var i=0;i<10;i++){
            const op = document.createElement('p')
            op.innerHTML = i
            fragEl.appendChild(op)
        }
        document.body.appendChild(fragEl)

        // 克隆节点优化:寻找一个类似的DOM节点进行克隆。
        // 克隆一个元素节点会拷贝它所有的属性和属性值，包括属性上绑定的事件。但不会拷贝JavaScript动态绑定的事件，比如监听`addEventListener`或js中写的`node.onclick = fn`
        // 对比新增
        const oldP = document.getElementById('old1')
        for(var i=0;i<10;i++){
            const newP = oldP.cloneNode(false) // false 是否深拷贝，否；默认true
            newP.innerHTML = `old${i}`
            document.body.appendChild(newP)
        }

        console.log(fragEl) // #document-fragment

    </script>
</body>
</html>